<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <link rel="stylesheet" href="CSS/index.css">
    <script src="layui-v2.8.0/layui/layui.js"></script>
    <style>
        .layui-row{
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .layui-carousel img{
            width: 100%;
            height: calc(100% - 50px);
            border-radius: 0;
            opacity: 0.7;
        }
        .nav{
            position: fixed; /* 将导航栏定位为固定位置 */
            top: 0; /* 将导航栏定位在页面顶部 */
            left: 0;
            width: 100%; /* 设置导航栏宽度为100% */
            z-index: 999;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="nav">

    <div class="layui-row">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="images/logo.png" alt="">
                    <span>个人博客系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <img src="images/user.png" alt="">
                <span id="user">未登录</span>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html" id="list">
                    <img src="images/collect.png" alt="">
                    <span>博客列表</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogEdit.html" id="edit">
                    <img src="images/write.png" alt="">
                    <span>发布博客</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="login.html">
                    <img src="images/login.png" alt="">
                    <span>登录</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="register.html">
                    <img src="images/register.png" alt="">
                    <span>注册</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="layui-carousel" id="ID-carousel-demo-image">
    <div carousel-item>
        <div><img src="images/个人博客系统.png" alt="" /></div>
        <div><img src="images/blog2.png" alt="" /></div>
        <div><img src="images/blog3.png" alt="" /></div>
    </div>
</div>


<div class="content">
    <div class="layui-timeline">
        <div class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">精品文章推荐</h3>
                <ul>
                    <li><a href="https://blog.csdn.net/m0_63463510/article/details/127833050">【web前端开发】HTML知识点超详细总结</a></li>
                    <li><a href="https://blog.csdn.net/m0_63463510/article/details/129373336">【web前端开发】CSS最常用的11种选择器</a></li>
                    <li><a href="https://blog.csdn.net/m0_63463510/article/details/129373433">【web前端开发】超详细讲解CSS盒子模型</a></li>
                    <li><a href="https://blog.csdn.net/m0_63463510/article/details/129373447">【web前端开发】CSS浮动</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">写博客的好处</h3>
                <ul>
                    <li>提升技术能力：写博客需要深入思考和研究，可以帮助程序员加深对技术的理解和掌握，提高技术能力。</li>
                    <li>分享经验和技巧：程序员可以通过博客分享自己的经验和技巧，帮助其他程序员解决问题和提高技术水平。</li>
                    <li>培养写作能力：写博客需要进行思考、整理、表达和编辑，这些过程可以帮助程序员培养写作能力，提高沟通和表达能力。</li>
                    <li>增加交流和互动：博客可以吸引读者来阅读、评论和分享，从而增加交流和互动，促进自己的成长和学习。同时，也可以通过回复评论和参与社区活动，结识更多的同行和专业人士，拓展自己的人脉和资源。</li>
                    <li>培养持续做一件事情的能力: 开始是坚持，后来是习惯，接着喜欢。让你长久地去跑步，你可能做不到；让你每个月看一本书，你也可能做不到；但让你持续地写一个博客，你可以做得到。 你不相信？你不试试你怎么知道？ 默默地持续做一件事是一种难得的能力，也是一种难得的品质。</li>
                    <li>讨论反思: 每人都会有思维的盲点，就好像这篇文章一样，可能你觉得我可能说得不对，你可以反驳我，我喜欢这种讨论，因为讨论的过程中会产生各种的思维的碰撞，这种碰撞会让你反思，也会激发出你新的灵感，这种讨论反思给自己的带来巨大的受益。</li>
                </ul>
            </div>
        </div>
        <div class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">寄语: 少年不畏岁月长,彼方尚有荣光在</div>
            </div>
        </div>
    </div>
    <h3>该网站实现的方式:</h3>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Java</li>
            <li>MySQL</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它使用标记（markup）来描述网页的结构和内容，
                包括文本、图片、超链接、表格、表单等元素。HTML文档由一系列的标记组成，这些标记通常被称为HTML标签（HTML tag）。
            </div>

            <div class="layui-tab-item">CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的语言。
                它与HTML一起使用，可以控制网页中各种元素的外观和排版，例如字体、颜色、边框、背景、布局等。
            </div>

            <div class="layui-tab-item">JavaScript（简称JS）是一种高级的、解释型的编程语言，主要用于Web前端开发。
                它可以在网页中实现动态效果、交互功能、表单验证等，也可以在服务器端进行编程，实现后端逻辑 。
            </div>

            <div class="layui-tab-item">Java是一种广泛使用的计算机编程语言，
                Java语言具有跨平台性、面向对象、安全性、可移植性等特点
                ，被广泛应用于Web应用程序、企业级应用程序、移动应用程序、游戏开发等领域。
            </div>

            <div class="layui-tab-item">
                MySQL是一种开源的关系型数据库管理系统,MySQL支持多种操作系统，包括Windows、Linux、Unix等，
                同时也支持多种编程语言，如Java、PHP、Python等。
                MySQL具有高性能、可靠性、易用性等特点，被广泛应用于Web应用程序、企业级应用程序等领域。
            </div>
        </div>
    </div>
    <div class="bottom">
        <div id="timer" style="font-size: 18px">网站运行时间:00天00小时00分00秒</div>
        <div class="loader">
            <div class="loader-inner">
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
                <div class="loader-block"></div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#ID-carousel-demo-image'
            , width: '100%' //设置容器宽度
            , height: ' calc(100% + 50px)' //设置容器高度
            //  , full:'true' //是否全屏轮播,默认false
            // , arrow: 'always' //始终显示箭头和点击按钮
            // ,anim: 'updown' //切换动画方式，可从各个方向滚动
            ,interval: 3000
        });
    });

    let user = document.querySelector('#user');
    let edit = document.querySelector('#edit');
    let list = document.querySelector('#list');
    edit.onclick = function () {
        if (user.innerHTML === '未登录'){
            alert('未登录,请先登录!');
        }
    }

    list.onclick = function () {
        if (user.innerHTML === '未登录'){
            alert('未登录,请先登录!');
        }
    }
</script>

<script !src="">
    // 设置目标时间点
    var targetTime = new Date("2023-05-03T15:21:20Z");

    // 更新计时器的值
    function updateTimer() {
        // 获取当前时间
        var currentTime = new Date();

        // 计算距离目标时间点的时间差
        var timeDiff =  currentTime - targetTime;

        // 计算时间差中的天数、小时数、分钟数和秒数
        var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        // 显示计时器的值
        document.getElementById("timer").innerHTML = "网站运行时间为: "+days + "天" + hours + "小时" + minutes + "分钟 " + seconds + "秒";
    }

    // 更新计时器的值并设置定时器
    updateTimer();
    setInterval(updateTimer, 1000);

</script>
</body>
</html>